// 购物车 的逻辑
$('.header  .sy').click(function(){
    window.location.href = './index.html'
})
// 获取元素
const emptyBox = document.querySelector('.empty')
const cartListBox = document.querySelector('.cart')
// 获取页面元素
//登录验证
const id = window.localStorage.getItem('id')
const token = window.localStorage.getItem('token')
//验证是否有该id 
!id ? window.location.href = './login.html' : getCartList()

//请求购物车商品列表
async function getCartList() {
    //发送请求
    const res = await pAjax({
        url: 'http://localhost:8888/cart/list',
        data: { id },
        headers: { authorization: token },
        dataType: 'json'
    })
    //判断登录是否过期
    if (res.code === 0) {
        window.location.href = './login.html'
        return
    }
    //渲染页面
    bindHtml(res)
}

// 渲染页面的处理函数
function bindHtml(res) {
    //判断 res.cart 是否为空
    if (!res.cart.length) {
        emptyBox.classList.add('active')
        cartListBox.classList.remove('active')
        return
    }

    // 统计一些信息
    // 总件数
    let totalNum = 0
    //总价格
    let totalPrice = 0
    //选中个数
    let totalSelect = 0

    res.cart.forEach(item => {
        // 只有选中的 is_select === true 的, 计算总件数, 计算总价格
        if (item.is_select) {
            // 总件数 += 商品个数
            totalNum += item.cart_number
            // 总价格 += 商品个数*商品单价
            totalPrice += item.cart_number * item.current_price
            // 选中数++
            totalSelect++
        }
    })
    //渲染页面
    let str =
        `
               <div class="top">
                 全选 <input class="select_all" type="checkbox" ${totalSelect === res.cart.length ? 'checked' : ''}>
               </div>
               <ul class="cart_list">
         `

    // 根据 res.cart 遍历生成 li
    res.cart.forEach(item => {
        str +=
            `
                 <li>
                   <div class="select">
                     <input data-id="${item.goods_id}" class="select_item" type="checkbox" ${item.is_select ? 'checked' : ''}>
                   </div>
                   <div class="show">
                     <img src="${item.img_small_logo}" alt="">
                   </div>
                   <div class="title">${item.title}</div>
                   <div class="price">￥${item.current_price}</div>
                   <div class="number">
                     <button class="sub_btn" data-id="${item.goods_id}" data-num="${item.cart_number}">-</button>
                     <input type="text" value="${item.cart_number}">
                     <button data-num="${item.cart_number}" data-id="${item.goods_id}" data-max="${item.goods_number}" class="add_btn">+</button>
                   </div>
                   <div class="subPrice">￥${(item.current_price * item.cart_number).toFixed(2)}</div>
                   <div class="delete">
                     <button data-id="${item.goods_id}" class="delete_btn">删除</button>
                   </div>
                 </li>
               `
    })

    str +=
        `
               </ul>
               <div class="bottom">
                 <p class="totalNum">
                   总计 : ${totalNum} 件商品
                 </p>
                 <div class="btns">
                   <button class="clear">清空购物车</button>
                   <button class="delAll${totalSelect === 0 ? ' disable' : ''}">删除所有已选中</button>
                   <button class="pay${totalSelect === 0 ? ' disable' : ''}">去支付</button>
                 </div>
                 <p class="totalPrice">
                   总计 : ￥ ${totalPrice.toFixed(2)}
                 </p>
               </div>
         `

    //  将渲染完的 插入页面内部
    cartListBox.innerHTML = str

    //让标签显示出来
    cartListBox.classList.add('active')
    emptyBox.classList.remove('active')
}
//各种点击事件 
//事件委托 给 cartListBox
cartListBox.addEventListener('click', async e => {

    //判断点击的是每一条信息的 复选框
    if (e.target.className === 'select_item') {
        //拿到商品ID
        const goodsId = e.target.dataset.id

        //发送请求
        const res = await pAjax({
            url: 'http://localhost:8888/cart/select',
            method: 'POST',
            data: { id, goodsId },
            headers: { authorization: token },
            dataType: 'json'
        })

        // 从新请求商品列表
        if (res.code === 1) getCartList()
    }
    //判断点击的是删除每一条信息的 按钮
    if (e.target.className === 'delete_btn') {
        // 拿到商品 id
        const goodsId = e.target.dataset.id

        // 发送请求
        const res = await pAjax({
            url: 'http://localhost:8888/cart/remove',
            data: { id, goodsId },
            headers: { authorization: token },
            dataType: 'json'
        })

        // 从新请求列表数据
        if (res.code === 1) getCartList()
    }
    //判断点击的是每一条商品数量 +
    if (e.target.className === 'add_btn') {
        // 拿到商品 id
        const goodsId = e.target.dataset.id
        // 拿到目前的购买数量, +1
        const num = e.target.dataset.num - 0
        // 拿到库存的数量
        const maxNum = e.target.dataset.max - 0

        // 判断, 如果目前就是最大库存, 那么什么都不做了
        if (num >= maxNum) return alert('库存已经不够了')

        // 发送请求
        const res = await pAjax({
            url: 'http://localhost:8888/cart/number',
            method: 'POST',
            data: { id, goodsId, number: num + 1 },
            headers: { authorization: token },
            dataType: 'json'
        })

        // 从新渲染页面
        if (res.code === 1) getCartList()
    }

    //判断点击的是每一条商品数量 -
    if (e.target.className === 'sub_btn') {
        // 拿到商品 id
        const goodsId = e.target.dataset.id
        // 拿到目前的购买数量
        const num = e.target.dataset.num - 0

        // 判断, 如果当前 num <= 1, 不能少了
        if (num <= 1) return alert('别再少了, 再少没有了')

        // 发送请求
        const res = await pAjax({
            url: 'http://localhost:8888/cart/number',
            method: 'POST',
            data: { id, goodsId, number: num - 1 },
            headers: { authorization: token },
            dataType: 'json'
        })

        // 从新请求列表数据
        if (res.code === 1) getCartList()
    }

    //判断点击的是全选按钮
    if (e.target.className === 'select_all') {
        // 拿到的是自己的选中状态
        const type = e.target.checked ? 1 : 0

        // 发送请求
        const res = await pAjax({
            url: 'http://localhost:8888/cart/select/all',
            method: 'POST',
            data: { id, type },
            dataType: 'json',
            headers: { authorization: token }
        })

        // 从新请求列表数据
        if (res.code === 1) getCartList()
    }

    //判断点击的是删除所有已选中
    if (e.target.className === 'delAll') {
        // 发送请求
        const res = await pAjax({
            url: 'http://localhost:8888/cart/remove/select',
            data: { id },
            dataType: 'json',
            headers: { authorization: token }
        })

        // 从新请求列表数据
        if (res.code === 1) getCartList()
    }

    //判断点击清空购物车
    if (e.target.className === 'clear') {
        // 发送请求
        const res = await pAjax({
            url: 'http://localhost:8888/cart/clear',
            data: { id },
            headers: { authorization: token },
            dataType: 'json'
        })

        // 从新请求列表数据
        if (res.code === 1) getCartList()
    }

    //判断点击的是支付按钮
    if (e.target.className === 'pay') {
        // 发送请求
        const res = await pAjax({
            url: 'http://localhost:8888/cart/pay',
            method: 'POST',
            data: { id },
            headers: { authorization: token },
            dataType: 'json'
        })

        alert('只接收现金')
    }
})